<!DOCTYPE HTML>
<html>
	<head>
		<title>别踩白块</title>
		<meta charset="utf-8">
		<style>
			#count{
				width:400px;
				height:400px;
				border:1px solid black;
				margin:0 auto;
				position: relative;
			}
			#main{
				position:relative;
				top:-100px;
			}
			.row{
				height:100px;
			}
			.row div{
				width:98px;
				height:98px;
				border:1px solid black;
				float:left;
			}
			.black{
				background:black;
			}
		</style>
		<script>
			window.onload=function(){
				var timer=null;
				var oMain=document.getElementById('main');
				var oBtn=document.getElementById('btn');
				var speed=3;
				var time=0;
				//考虑兼容性firstChild与firstElementChild
				//lastChild与lastElementChild
				//获取样式
			function getstyle(obj,name)
			{
				if(obj.currentStyle)
				{
					
					return obj.currentStyle[name];
				}
				else
				{
					
					return getComputedStyle(obj,false)[name];
				}
			}
				//创建DIV
				function Create(className){
					var oDiv=document.createElement('div');
					
					if(className)
					{
						oDiv.className=className;
					}
					return oDiv;
				}
				//造4个小DIV
				function aDiv(){

					var ind=Math.floor(Math.random()*4);
					var oRow=Create('row');
					for(var i=0;i<4;i++)
					{
						if(i==ind)
						{
							oRow.appendChild(Create('black'));
						}
						else
						{
							oRow.appendChild(Create());
						}
					}
					
					if(oMain.firstChild)
					{
						oMain.insertBefore(oRow,oMain.firstElementChild);
					}
					else
					{
						oMain.appendChild(oRow);
					}

				}
			
			//控制运动
			function move() {
				var oTop=getstyle(oMain,'top');
				oTop=parseInt(oTop)+speed;
				oMain.style.top=oTop+'px';
				if(oTop> 0)
				{	
					aDiv();
				   oMain.style.top = '-100px';
					if(oMain.lastElementChild.pass==undefined)
					{
						alert('当前速度为'+speed+',输了,重新来过吧');
						clearInterval(timer);
					}
					
				}
				if(oMain.children.length>=5) {
        			oMain.removeChild(oMain.lastElementChild);
    				}
					
			}
			//初始化
				function init()
				{
					for(var i=0;i<4;i++)
					{
						aDiv();
					}
				oMain.onclick=function(ev){
					ev.target=ev.target||ev.srcElement;
					if(ev.target.className=='')
						{
						alert('当前速度为'+speed+',输了,重新开始一局吧');
						clearInterval(timer);
						}
					else{
						time++;
						ev.target.className='';
						ev.target.parentNode.pass=true;
						var oSc=document.getElementById('sc');
						var score=parseInt(oSc.innerHTML)+1;
						oSc.innerHTML=score;
						if(score%10==0)
						{
							speed+=2;
						}
						}
				}
					timer =setInterval(move, 40);
				}
				init();
				oBtn.onclick=function(){
					window.location.reload();
				}	
				
			}

		</script>
	</head>
	<body>
	<h2 id="sc">0</h2>
	<input type="button" value="重新开始一局吧" id="btn">
		<div id="count">
			<div id="main">
			</div>
		</div>
	</body>
</html>